/**
 * Created by levy on 16/7/11.
 * 不必拘泥于react的写法
 * reviseDate: 2016/08/17
 * author: Truexin
 */
import {shopping} from "../const/shopping";
import {TimeUtil} from "../components/shopping/TimeUtil";
import {OrderUtil} from "../components/shopping/OrderUtil";
import {ORDER_LIST} from "../const/shopping-order";
import PullRefresh from "../components/mui/PullRefresh";
import NoData from "../components/NoData";

const lf = liefeng,
    R = React,
    RC = React.createClass,
    log = lf.utils.log,
    ajax = lf.utils.ajax,
    api = shopping.api.order;

const flag = lf.utils.getUrlParam('flag');

/**
 * props
 *  data
 */
const Order = RC({
    getInitialState() {
        return {
            class: '',
            time: TimeUtil.convertTime(this.props.data.remaingTime),
        }
    },
    hideOrder() {
        this.setState({class: 'ele-hide'});
    },
    deleteOrder() {
        ajax({
            type: 'post',
            url: shopping.api.prefix + api.delete,
            data: {
                orderId: this.props.data.orderId
            }
        }, null, () => {
            this.hideOrder();
        })
    },
    cancelOrder() {
        ajax({
            type: 'post',
            url: shopping.api.prefix + api.cancel,
            data: {
                orderId: this.props.data.orderId
            }
        }, null, () => {
            this.hideOrder();
        })
    },
    confirmReceived() {
        ajax({
            type: 'post',
            url: shopping.api.prefix + api.confirmReceived,
            data: {
                orderId: this.props.data.orderId
            }
        }, null, () => this.hideOrder());
    },
    componentDidMount() {
        let order = this.props.data;

        if (OrderUtil.showNotPay(order)) {
            const ingFn = (time) => {
                this.setState({time: time});
            };

            TimeUtil.countDown(this.state.time, ingFn, this.hideOrder);
        }

        //bind event
        $(R.findDOMNode(this.refs.delete)).on('tap', () => {
            lf.appJs.confirm('确认删除订单吗?', this.deleteOrder);
        });

        $(R.findDOMNode(this.refs.order)).on('tap', () => {
            lf.appJs.doAction(`shopping-order-detail.html?orderId=${this.props.data.orderId}`,
                '订单详情');
        });

        $(R.findDOMNode(this.refs.cancelOrder)).on('tap', () => {
            lf.appJs.confirm('确认取消订单吗?', this.cancelOrder);
        });

        $(R.findDOMNode(this.refs.payOrder)).on('tap', () => {
            lf.appJs.doAction(`shopping-order-pay.html?orderId=${order.orderId}`, '收银台');
        });


        $(R.findDOMNode(this.refs.confirmReceived)).on('tap', () => {
            lf.appJs.confirm('确认收货吗?', this.confirmReceived);
        });

    },
    render() {
        let st = this.state,
            data = this.props.data,
            min = this.state.time.min,
            sec = this.state.time.sec;

        return <div className={"split-line " + this.state.class}>
            <div className="row flex space-between border-bottom">
                <div>
                    <span>订单时间: </span>
                    <span className="text-gray">{lf.utils.format(data.confirmTime)}</span>
                </div>
                {
                    OrderUtil.canDelete(data) ?
                        <span className="mui-icon mui-icon-trash" ref="delete"/> : ''
                }
            </div>
            <li className={"order mui-table-view-cell "} ref="order">
                <div className="flex mui-navigate-right">
                    <img className="order-img" src={lf.utils.getProtocol() + shopping.imgPre + data.orderThumb}/>
                    <div className="order-info">
                        <div className="row">订单编号: <span className="text-gray">{data.orderSn}</span></div>
                        <div className="row">订单金额: <span className="red">{'￥' + data.orderAmount}</span></div>
                        <div className="row">订单状态: <span className="text-gray">{OrderUtil.getOrderStatus(data)}</span>
                        </div>
                    </div>
                </div>
            </li>
            {
                OrderUtil.showNotPay(data) ?
                    <div className="append-row">
                        <span ref="cancelOrder" className="mui-btn shopping-blue-bg">取消订单</span>
                        <span ref="payOrder" className="mui-btn shopping-red-bg">{'支付: ' +
                        min + ':' + (sec < 10 ? '0' + sec : sec)}
                        </span>
                    </div>
                    : ''
            }
            {
                OrderUtil.showConfirmReceived(data) ?
                    <div className="append-row">
                        <span ref="confirmReceived" className="mui-btn shopping-red-bg">确认收货</span>
                    </div>
                    : ''
            }
        </div>
    }
});

/**
 * props
 *  user
 */
const Root = RC({
    getInitialState() {
        return {
            orderList: [],
            noData: false,
        }
    },
    componentWillMount() {
        let url = flag == ORDER_LIST.PENDING ? api.listNotPay :
            flag == ORDER_LIST.SHIPPING ? api.listShipping :
                flag == ORDER_LIST.REFUND ? api.listRefund :
                    flag == ORDER_LIST.UNEVALUATED ? api.listUnevaluated :
                        api.listAll;
        var me = this,
            user = me.props.user;
        
        ajax({
            url: shopping.api.prefix + url,
            data: {
                custGlobalId: user.globalId || (user.custLoginVo && user.custLoginVo.globalId),
                currPage: 1,
                size: 999,
            },
            success: (data) => {
                if (data.maxCount == 0) {

                    this.setState({
                        noData: true,
                    }, function () {
                        let $muiScroll = $('.mui-scroll');
                        $muiScroll && $muiScroll.css('backgroundColor', '#fff');
                    });
                }
                else
                    this.setState({
                        orderList: data.dataList.map(data => <Order key={data.orderSn} data={data}/>)
                    });
            }
        })
    },
    render() {
        return <ul className="order-list mui-table-view">
            {this.state.orderList}
            {
                this.state.noData ?
                    <NoData data={{span_text:
                        flag == ORDER_LIST.PENDING ? '还没有待支付订单噢~' :
                        flag == ORDER_LIST.SHIPPING ? '还没有待收货订单噢~' :
                        flag == ORDER_LIST.REFUND ? '还没有退款/退货订单噢~' :
                        flag == ORDER_LIST.UNEVALUATED ? '还没有待评价订单噢~' :
                            '还没有订单噢~'}}/> : ''
            }
        </ul>
    }
});

lf.appJs.getUser(function (user) {
    R.render(
        <PullRefresh data={ <Root user={user}/>}/>,
        document.getElementById('root')
    );
});